<template>
  <div class="app-container">
    <bread parentPathText="地区管理" currentPathText="网格管理"/>
    <el-form :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="网格筛选">
        <el-select
          v-model="queryParams.gridVal"
          placeholder="选择网格"
          size="small"
          style="width: 260px"
          @change="getSelectList(queryParams.gridVal, 2)"
        >
          <el-option
            v-for="item in gridData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="组别筛选">
        <el-select
          v-model="queryParams.groupVal"
          placeholder="选择组别"
          clearable
          size="small"
          style="width: 260px"
          @change="getGroupItem"
        >
          <el-option
            v-for="item in groupData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="筛选类型">
        <el-select
          v-model="queryParams.type"
          placeholder="选择类型"
          clearable
          size="small"
          style="width: 260px"
        >
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.info"
          placeholder="请输入姓名/电话"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="addItem">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        align="center"
        label="微网格"
        prop="name"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="总人数"
        prop="peopleNum"
        :show-overflow-tooltip="true"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="总户数"
        prop="houseNum"
        :show-overflow-tooltip="true"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="微网格长"
        prop="manageUser"
        :show-overflow-tooltip="true"
        min-width="20%"
      />
      <el-table-column align="center" label="电话" prop="manageUserTel" min-width="20%" />
      <el-table-column
        align="center"
        label="所属网格"
        prop="gridName"
        min-width="30%"
      />
      <el-table-column
        align="center"
        label="组别"
        prop="groupName"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="操作"
        min-width="25%"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      :before-close="handleClose"
      ref="ruleForm" 
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="微网格" prop="gridName">
          <el-input
            v-model="ruleForm.gridName"
            placeholder="请输入微网格名称"
          />
        </el-form-item>
         <el-form-item label="总人数" prop="peopleNum">
          <el-input-number
            v-model="ruleForm.peopleNum"
            type="number"
            :min="0"
            style="width:100%;"
          />
        </el-form-item>
        <el-form-item label="总户数" prop="houseNum">
          <el-input-number
            v-model="ruleForm.houseNum"
            type="number"
            :min="0"
            style="width:100%;"
          />
        </el-form-item>
        <el-form-item label="所属网格" prop="gridSection">
          <el-select
            v-model="ruleForm.gridSection"
            @change="getSelectList(ruleForm.gridSection, 3)"
          >
            <el-option
              v-for="item in gridData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组别" prop="groupVal">
          <el-select v-model="ruleForm.groupVal" @change="popGroupValChange">
            <el-option
              v-for="item in popGroupData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="微网格长" prop="manage" @change="popWeiChange">
          <el-select v-model="ruleForm.manage">
            <el-option
              v-for="item in weiLeaderData"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="微网格长" prop="manageUser" @change="popWeiChange">
          <el-input v-model="ruleForm.manageUser" />
        </el-form-item>
        <el-form-item label="手机号" prop="manageUserTel" @change="popWeiChange">
          <el-input v-model="ruleForm.manageUserTel" />
        </el-form-item>
        <el-form-item label="小组长">
          <el-input v-model="ruleForm.leader" disabled />
        </el-form-item>
        <el-form-item label="村干部">
          <el-input v-model="ruleForm.villageCadre" disabled />
        </el-form-item>
        <el-form-item label="联村干部">
          <el-input v-model="ruleForm.jointVillageCadre" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>
<script>
import initPagin from '../mixins/index.js';
export default {
  mixins:[initPagin],
  data() {
    return {
      queryParams: {
        gridVal: "",
        groupVal: "",
        type: "",
        info: "",
      },
      gridData: [],
      groupData: [],
      types: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "姓名",
          value: 1,
        },
        {
          label: "电话",
          value: 2,
        },
      ],
      loading: false,
      // 弹框
      title: "添加",
      dialogVisible: false,
      ruleForm: {
        gridName: "",
        gridSection: "",
        groupVal: "",
        leader: "",
        leaderId: "",
        villageCadre: "",
        villageCadreId: "",
        jointVillageCadre: "",
        jointVillageCadreId: "",
        cunLeader: "",
        lianLeader: "",
        manageUser: "",
        manageUserTel:'',
        peopleNum:0,
        houseNum:0
      },
      rules: {
        gridName: [
          { required: true, message: "请输入微网格名称", trigger: "blur" },
        ],
        peopleNum: [
          { required: true, message: "请输入总人数", trigger: "blur" },
        ],
        houseNum: [
          { required: true, message: "请输入总户数", trigger: "blur" },
        ],
        gridSection: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
        groupVal: [
          {
            required: true,
            message: "请选择组别",
            trigger: "change",
          },
        ],
        leader: [
          {
            required: true,
            message: "请选择小组长",
            trigger: "change",
          },
        ],
        cunLeader: [
          { required: true, message: "请选择村干部", trigger: "change" },
        ],
        manageUser: [
          { required: true, message: "请输入微网格长", trigger: "blur" },
        ],
        manageUser: [
          { required: true, message: "请输入微网格长", trigger: "blur" },
        ],
        manageUserTel: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号码",
            trigger: "change",
          },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
        lianLeader: [
          { required: true, message: "请选择联村干部", trigger: "change" },
        ],
      },
      popGroupData: [],
      weiLeaderData:[],
      time: new Date().getTime(),
      id: "",
    };
  },
  mounted() {
    this.getSelectList(0, 1); // 获取微网格名、组名
    this.getList(); //获取列表信息
  },
  methods: {
    // 搜索按钮操作
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
       Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = "";
      });
    },
    // 获取列表
    getList() {
      this.loading = true;
      let params = {
        time: this.time,
        grid: this.queryParams.gridVal,
        groupId: this.queryParams.groupVal,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.queryParams.type,
        queryMsg: this.queryParams.info,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.list, {
          time: this.time,
          grid: this.queryParams.gridVal,
          groupId: this.queryParams.groupVal,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.queryParams.type,
          queryMsg: this.queryParams.info,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.loading = false;
          this.tableList = res.data.data;
          this.total = res.data.count;
        })
        .catch(() => {});
    },
    // 获取微网格名、组名
    getSelectList(parentId, type) {
      let params = {
        time: this.time,
        parentId,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.selectList, {
          time: this.time,
          parentId,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          if (type == 1) {
            this.gridData = res.data.data;
          } else if (type == 2) {
            this.queryParams.groupVal = '';
            this.groupData = res.data.data;
          } else if (type == 3) {
            this.ruleForm.groupVal = "";
            this.popGroupData = res.data.data;
            this.ruleForm.leader = "";
            this.ruleForm.miniGrid = "";
          } else if (type == 4) {
            // 编辑
            this.popGroupData = res.data.data;
          }
        })
        .catch(() => {});
    },
    // 添加
    handleAdd() {
      this.id = '';
      this.dialogVisible = true;
      this.title = "新增微网格";
      Object.keys(this.ruleForm).forEach((key) => {
        this.ruleForm[key] = "";
      })
    },
    // 选择组
    getGroupItem(val) {
      this.ruleForm.groupVal = val;
    },
    // 获取小组长,微网格名称
    popGroupValChange(val) {
      let params = {
        time: this.time,
        groupId: val,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.getUserCadresInfo, {
          time: this.time,
          groupId: val,
          sigin: this.$md5.val(result),
        })
        .then((res) => {
          //小组长
          this.ruleForm.leader = res.data.data.groupManage.userName;
          this.ruleForm.leaderId = res.data.data.groupManage.userId;
          //干部
          this.ruleForm.villageCadre = res.data.data.villageCadre.userName;
          this.ruleForm.villageCadreId = res.data.data.villageCadre.userId;
          //联村干部
          this.ruleForm.jointVillageCadre =
            res.data.data.jointVillageCadre.userName;
          this.ruleForm.jointVillageCadreId =
            res.data.data.jointVillageCadre.userId;
        })
        .catch(() => {});
      this.popMiniGrid(val); // 获取微网格长候选列表
    },
    // 获取微网格长候选列表
    popMiniGrid(val,manageId) {
      this.ruleForm.manage = '';
      let params = {
        time: this.time,
        miniGrid: val,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.miniGrid.getUserSelect, {
          time: this.time,
          miniGrid: val,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.weiLeaderData = res.data.data;
          this.ruleForm.manage = manageId;
        })
        .catch(() => {});
    },
    // 关闭弹框
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
    // 编辑
    handleUpdate(row) {
      this.dialogVisible = true;
      this.title = "编辑微网格";
      this.id = row.id;
      let params = {
        time: this.time,
        id: row.id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.miniGrid.detail, {
          time: this.time,
          id: row.id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.ruleForm.gridName = res.data.data.name;
          this.ruleForm.peopleNum = res.data.data.peopleNum;
          this.ruleForm.houseNum = res.data.data.houseNum;
          this.ruleForm.gridSection = res.data.data.grid;
          this.ruleForm.groupVal = res.data.data.groupId;
          
          this.ruleForm.leader = res.data.data.groupManage;
          this.ruleForm.villageCadre = res.data.data.villageCadres;
          this.ruleForm.manageUser = res.data.data.manageUser;
          this.ruleForm.manageUserTel = res.data.data.manageUserTel;
          this.getSelectList(res.data.data.grid, 4);
          //this.popMiniGrid(res.data.data.groupId,res.data.data.manageId);
          this.ruleForm.jointVillageCadre = res.data.data.jointVillageCadres;
        })
        .catch(() => {});

    },
    // 删除按钮操作
    handleDelete(row) {
       let that = this;
      this.$confirm("是否确认删除?", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          that.delRole(row.id);
        })
        .catch(() => {});
    },
    // 删除
    delRole(id) {
      let params = {
        time: this.time,
        id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.miniGrid.delete, {
          time: this.time,
          id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.msgSuccess("删除成功");
          this.getList();
        })
        .catch(() => {});
    },

    // 弹框微网格长
    popWeiChange(val){
      this.ruleForm.manage = val;
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "";
          let params = {
            id: this.id,
            time: this.time,
            name: this.ruleForm.gridName,
            peopleNum:this.ruleForm.peopleNum,
            houseNum:this.ruleForm.houseNum,
            manageUser:this.ruleForm.manageUser,
            manageUserTel:this.ruleForm.manageUserTel,
          //  manageId: this.ruleForm.manage?this.ruleForm.manage:'', // 微网格长
            groupManage: this.ruleForm.leader?this.ruleForm.leader:'', // 小组长
            groupManageId: this.ruleForm.leaderId?this.ruleForm.leaderId:'',
            villageCadres: this.ruleForm.villageCadre?this.ruleForm.villageCadre:'', // 村干部
            villageCadresId: this.ruleForm.villageCadreId?this.ruleForm.villageCadreId:'',
            jointVillageCadres: this.ruleForm.jointVillageCadre?this.ruleForm.jointVillageCadre:'', // 联村干部
            jointVillageCadresId: this.ruleForm.jointVillageCadreId?this.ruleForm.jointVillageCadreId:'',
            grid: this.ruleForm.gridSection?this.ruleForm.gridSection:'',
            groupId: this.ruleForm.groupVal?this.ruleForm.groupVal:'',
          };
          let result = this.$md5.transferValue(params);
          if (!this.id) {
            url = this.stateUrl.miniGrid.add;
          } else {
            url = this.stateUrl.miniGrid.edit;
          }
          this.axios
            .post(url, {
              id: this.id,
              time: this.time,
              name: this.ruleForm.gridName,
              peopleNum:this.ruleForm.peopleNum,
              houseNum:this.ruleForm.houseNum,
              manageUser:this.ruleForm.manageUser,
              manageUserTel:this.ruleForm.manageUserTel,
             // manageId: this.ruleForm.manage?this.ruleForm.manage:'', // 微网格长
              groupManage: this.ruleForm.leader?this.ruleForm.leader:'', // 小组长
              groupManageId: this.ruleForm.leaderId?this.ruleForm.leaderId:'',
              villageCadres: this.ruleForm.villageCadre?this.ruleForm.villageCadre:'', // 村干部
              villageCadresId: this.ruleForm.villageCadreId?this.ruleForm.villageCadreId:'',
              jointVillageCadres: this.ruleForm.jointVillageCadre?this.ruleForm.jointVillageCadre:'', // 联村干部
              jointVillageCadresId: this.ruleForm.jointVillageCadreId?this.ruleForm.jointVillageCadreId:'',
              grid: this.ruleForm.gridSection?this.ruleForm.gridSection:'',
              groupId: this.ruleForm.groupVal?this.ruleForm.groupVal:'',
              sign: this.$md5.val(result),
            })
            .then((res) => {
              if (this.id) {
                this.msgSuccess("编辑成功");
              } else {
                this.msgSuccess("添加成功");
              }
              this.$refs[formName].resetFields();
              this.dialogVisible = false;
              this.getList();
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
</style>